<template>
    <view class="uni-group" :class="['uni-group--'+mode ,margin?'group-margin':'']" :style="{marginTop: `${top}px` }">
        <slot name="title">
            <view v-if="title" class="uni-group__title" :style="{'padding-left':border?'30px':'15px'}">
                <text class="uni-group__title-text">{{ title }}</text>
            </view>
        </slot>
        <view class="uni-group__content" :class="{'group-conent-padding':border}">
            <slot/>
        </view>
    </view>
</template>

<script>
    /**
     * Group 分组
     * @description 表单字段分组
     * @tutorial https://ext.dcloud.net.cn/plugin?id=3281
     * @property {String} title 主标题
     * @property {Number} top 分组间隔
     * @property {Number} mode 模式
     */
    export default {
        name: 'uniGroup',
        emits: ['click'],
        props: {
            title: {
                type: String,
                default: ''
            },
            top: {
                type: [Number, String],
                default: 10
            },
            mode: {
                type: String,
                default: 'default'
            }
        },
        data() {
            return {
                margin: false,
                border: false
            }
        },
        watch: {
            title(newVal) {
                if (uni.report && newVal !== '') {
                    uni.report('title', newVal)
                }
            }
        },
        created() {
            this.form = this.getForm()
            if (this.form) {
                this.margin = true
                this.border = this.form.border
            }
        },
        methods: {
            /**
             * 获取父元素实例
             */
            getForm() {
                let parent = this.$parent;
                let parentName = parent.$options.name;
                while (parentName !== 'uniForms') {
                    parent = parent.$parent;
                    if (!parent) return false
                    parentName = parent.$options.name;
                }
                return parent;
            },
            onClick() {
                this.$emit('click')
            }
        }
    }
</script>
<style lang="scss">
    .uni-group {
        background: #fff;
        margin-top: 10px;
        // border: 1px red solid;
    }

    .group-margin {
        // margin: 0 -15px;
    }

    .uni-group__title {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        align-items: center;
        padding-left: 15px;
        height: 40px;
        background-color: #eee;
        font-weight: normal;
        color: #666;
    }

    .uni-group__content {
        padding: 15px;
        // padding-bottom: 5px;
        // background-color: #FFF;
    }

    .group-conent-padding {
        padding: 0 15px;
    }

    .uni-group__title-text {
        font-size: 14px;
        color: #666;
    }

    .distraction {
        flex-direction: row;
        align-items: center;
    }

    .uni-group--card {
        margin: 10px;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.08);
    }
</style>
